<template>
    <u-popup v-model="show" mode="center" border-radius="15">
        <view class="yp_detail_cp">
            <scroll-view
                :scroll-y="true"
                class="yp_scroll">
                <view class="container">
                    <view 
                        class="item" 
                        v-for="(item,index) in data" 
                        :key="index">
                        <view>
                            {{index}}:
                        </view>
                        <view>
                            {{item}}
                        </view>
                    </view>
                </view>
            </scroll-view>
            <u-button
                type="error"
                @click="show=false">
                关闭
            </u-button>
        </view>
    </u-popup>
</template>

<script>
//药品详情组件
export default {
    data() {
        return {
            show: false,
            data:null,
        }
    },
    methods:{
        setShowState(state){ //设置组件是否显示（外部调用）
            this.show = !!state;
        },
        setData(data){ //写入数据
            this.data = data;
        },
    },
}
</script>

<style lang="scss" scoped>
.yp_detail_cp {
    padding: 25rpx;
    text-align: center;
    height: fit-content;
    width: 80vw;
    .yp_scroll{
        height: 50vh;
        .container{
            height: 100%;
            .item{
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-gap: 15rpx;
                margin-bottom: 15rpx;
                text-align: center;
            }
        }
    }
    .u-button{
        margin-top: 25rpx;
        display: block;
    }
}
</style>
